<!--
 * _______________#########_______________________
 * ______________############_____________________
 * ______________#############____________________
 * _____________##__###########___________________
 * ____________###__######_#####__________________
 * ____________###_#######___####_________________
 * ___________###__##########_####________________
 * __________####__###########_####_______________
 * ________#####___###########__#####_____________
 * _______######___###_########___#####___________
 * _______#####___###___########___######_________
 * ______######___###__###########___######_______
 * _____######___####_##############__######______
 * ____#######__#####################_#######_____
 * ____#######__##############################____
 * ___#######__######_#################_#######___
 * ___#######__######_######_#########___######___
 * ___#######____##__######___######_____######___
 * ___#######________######____#####_____#####____
 * ____######________#####_____#####_____####_____
 * _____#####________####______#####_____###______
 * ______#####______;###________###______#________
 * ________##_______####________####______________
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-24 14:37:01
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-02-25 17:23:40
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <my-info />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="15" :xl="15">
        <message-review class="card" />
        <news class="card" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9">
        <money-info class="card" />
        <fast-menu class="card" />
        <contact class="card" />
      </el-col>
    </el-row>
    <footer class="copyrights">
      Copyright © 2021 广东蜂动科技有限公司
      <el-link
        type="primary"
        :underline="false"
        href="https://beian.miit.gov.cn/#/Integrated/index"
        target="_blank"
      >
        粤ICP备19069505号-1
      </el-link>
    </footer>
  </div>
</template>

<script>
import MyInfo from './MyInfo'
import MessageReview from './MessageReview'
import MoneyInfo from './MoneyInfo'
import News from './News'
import Contact from './Contact'
import FastMenu from './FastMenu'

export default {
  components: {
    MyInfo,
    MessageReview,
    MoneyInfo,
    News,
    FastMenu,
    Contact,
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.app-container {
  background: #f0f2f5;
  min-height: calc(100vh - 90px);
  .copyrights {
    padding: 40px 0 0;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    text-align: center;
  }
}
.card {
  margin-top: 24px;
  ::v-deep {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        color: $primary;
        // font-weight: bold;
      }
    }
    .footer {
      height: 47px;
      line-height: 47px;
      margin: 24px -20px -20px;
      border-top: 1px solid #e6ebf5;
      display: flex;
      align-items: stretch;
      .item {
        flex: 1;
        cursor: pointer;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        &:hover {
          background: rgba(0, 0, 0, 0.02);
          color: $primary;
        }
        &:not(:first-child) {
          border-left: 1px solid #e6ebf5;
        }
      }
    }
  }
}
</style>
